<template>
  <div id="user-list">
    <div class="search-input">
      <el-input ref="SI" @keyup.enter.native="searchHandle" v-model="searchName" suffix-icon="el-icon-search"></el-input>
      <h3>"{{searchWord}}"的搜索结果:</h3>
    </div>


    <div class="result-list" v-for="(item,index) in userList" :key="item.id" >
      <div class="unitLeft">
        <img src="@/assets/img/Avatar.jpg" alt="">
        <div class="msg">
          <h3>{{item.companyName||item.universityName||item.studentName}}</h3>
          <p v-if="item.companyName">
            {{item.address}}-企业
          </p>
          <p v-else-if="item.universityName">
            {{item.address}}-高校-{{item.nature}}
          </p>
          <p v-else>
            {{item.address||'未填写'}}-学生-{{item.yearNum}}
          </p>
        </div>
      </div>
      <div class="unitRight">
        <el-button style="width: 100px" @click="concernBtn(item)"><i :class="isConcern(item.companyName||item.studentName||item.universityName)?'el-icon-check':'el-icon-plus'">{{isConcern(item.companyName||item.studentName||item.universityName)?'已关注':'关注'}}</i></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addConcern, cancelConcern, getConcernList, searchUser} from "@/api/user";
import {judgeObj} from "@/untils/judgeObj";
import {identification} from "@/untils/identification";

export default {
  name: "index",
  data(){
    return{
      uid:this.$store.getters["user/getUser"].uid,
      type:this.$store.getters["user/getUser"].uType,
      searchName:'',
      userList:[],
      myConcern:[],
      searchWord:'',
      concern: {
        sid:0,
        uid:0,
        cid:0,
        type:'',
        tid:''
      },
    }
  },
  mounted() {
    let name=this.$route.query.searchName
    this.searchName=name
    this.searchHandle()
  },
  methods:{
    addCon() {
      addConcern(this.concern)
          .then(res => {
            console.log(res)
            this.$message.warning(res.data.extend.msg)
            this.getConcern()
          })
    },
    cancelCon(){
      if(this.concern.tid==this.uid&&this.concern.type==this.type){
        this.$message.warning("不能取消关注自己!")
        return
      }
      cancelConcern(this.concern)
          .then(res=>{
            console.log(res)
            this.$message.warning(res.data.extend.msg)
            this.getConcern()
          })
    },
    concernBtn(item){
      let type=this.type
      let id=this.uid
      if(type=='student'){
        this.concern.sid=id
      }else if(type=='company'){
        this.concern.cid=id
      }else {
        this.concern.uid=id
      }
      let user=identification(item)
      this.concern.tid=user.uid      //获取被关注人id
      this.concern.type=user.type      //获取被关注人的类型
      if(this.isConcern(item.companyName||item.studentName||item.universityName)){
        this.cancelCon()
      }else {
        this.addCon()
      }

    },
    isConcern(name){
      return  this.myConcern.includes(name)
    },
    getConcern(){
      getConcernList(this.uid,this.type)
          .then(res=>{
            const data=res.data.extend.concernList
            this.myConcern=[]
            for (let item of data){
              this.myConcern.push(item.companyName||item.studentName||item.universityName)
            }
            console.log(this.myConcern)
          })
    },
    searchHandle(){
      if(!this.searchName){
        return
      }
      // this.searchShow=true
     this.getConcern()
      searchUser(this.searchName)
          .then(res=>{
            console.log(res)
            this.searchWord=this.searchName
            this.userList=res.data.extend.list
            this.$refs.SI.focus()
          })
    },
  }
}
</script>

<style lang="stylus" scoped>
#user-list
  margin-top 5px
  width 100%
  min-height 800px
  height auto
  background white
  padding-top 10px

.result-list{
  margin: 10px;
  width: 98%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  transition: box-shadow .2s;
  border: 1px solid #ead5d5;
  cursor: pointer;
}
.result-list:hover{
  box-shadow: 0 0 3px gray;
}
.unitLeft{
  color: rgb(109,109,109);
  height: 100%;
  width: 40%;
  justify-content: space-between;
  display: flex;
}
.unitLeft *{
  margin: 0;
}

.unitLeft img{
  height: 100%;
  width: 60px;
  border-radius: 5px;
}
.msg{
  width: 74%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.unitRight{
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}


#result{
  z-index: 10;
  position: absolute;
  width: 100vw;
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color:rgba(255,255,255,0.3);
}
#result-con{
  position: relative;
  margin-top: 80px;
  margin-left: -3%;
  width: 44%;
  height: 85%;
  overflow: auto;
  background: #faebeb;
  box-sizing: border-box;
  padding: 20px;
}
#rightTab {
  width: 40px;
  height: 140px;
  background-color: #fff;
  position: fixed;
  bottom: 16%;
  right: 5%;
  z-index: 4;
}
.search-input
  width 98%
  margin 0px auto
</style>
